<template>
  <scroll-view enable-back-to-top @scrolltolower="onScrolltolower" class="viewport" scroll-y>
    <!-- 个人资料 -->
    <view class="profile" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
      <!-- 情况1：已登录 -->
      <view class="overview" v-if="memberStore.profile">
        <navigator url="/pagesMember/profile/profile" hover-class="none">
          <image class="avatar" src="@/static/images/faceImg.png" mode="aspectFill"></image>
        </navigator>
        <view class="meta">
          <view class="nickname">
            {{ userinfo?.mobile }}
          </view>
          <navigator class="extra" url="/pagesMember/profile/profile" hover-class="none">
            <text class="update">更新头像昵称</text>
          </navigator>
        </view>
      </view>
      <!-- 情况2：未登录 -->
      <view class="overview" v-else>
        <navigator url="/pages/login/login" hover-class="none">
          <image class="avatar gray" mode="aspectFill" src="@/static/images/home-icon1.png"></image>
        </navigator>
        <view class="meta">
          <navigator url="/pages/login/login" hover-class="none" class="nickname">
            未登录
          </navigator>
          <view class="extra">
            <text class="tips">点击登录账号</text>
          </view>
        </view>
      </view>
      <navigator class="settings" url="/pagesMember/settings/settings" hover-class="none">
        设置
      </navigator>
    </view>
    <!-- 我的订单 -->
    <view class="orders">
      <!-- <view class="title">
        我的订单
        <navigator class="navigator" url="/pagesOrder/list/list?type=0" hover-class="none">
          查看全部订单<text class="icon-right"></text>
        </navigator>
      </view> -->
      <view class="section">
        <!-- 订单 -->
        <view class="item" @tap="notOpen('会员功能')">
          <view class="img">
            <image src="/static/images/wode/tuikuan.png" />
          </view>
          <view class="text"> 账户金额 </view>
        </view>
        <view class="item" @tap="notOpen('会员功能')">
          <view class="img">
            <image src="/static/images/wode/tuikuan.png" />
          </view>
          <view class="text"> 退款 </view>
        </view>
        <view class="item" @tap="notOpen('分销')">
          <view class="img">
            <image src="/static/images/wode/chongzhi.png" />
          </view>
          <view class="text"> 充值 </view>
        </view>
        <!-- 客服 -->
      </view>
    </view>
    <!-- 账户金额与卡券 -->
    <view class="my-con my-tools">
      <!-- <view class="tit">
        <view class="text"> 换电 </view>
      </view> -->
      <!-- <view class="con-box">
        <view class="item" @tap="notOpen('会员功能')">
          <view class="img">
            <image src="/static/images/wode/personbalance.png" />
          </view>
          <view class="text"> 个人账户金额 </view>
        </view>
        <view class="item" @tap="notOpen('分销')">
          <view class="img">
            <image src="/static/images/wode/goupbalance.png" />
          </view>
          <view class="text"> 集团账户金额 </view>
        </view>
        <view class="item" @tap="notOpen('分销')">
          <view class="iconfont icon-user img">
            <image src="/static/images/wode/kaquan.png" />
          </view>
          <view class="text"> 卡券 </view>
        </view>
      </view> -->
    </view>
    <!---余额、发票、充电卡、设置-->
    <view class="my-con my-tools">
      <!-- <view class="tit">
        <view class="text"> 换电 </view>
      </view> -->
      <view class="con-box">
        <view class="item" @tap="notOpen('会员功能')">
          <view class="img">
            <image src="/static/images/wode/yue.png" />
          </view>
          <view class="text"> 我的车辆 </view>
        </view>
        <view class="item" @tap="notOpen('会员功能')">
          <view class="img">
            <image src="/static/images/wode/yue.png" />
          </view>
          <view class="text"> 账户记录 </view>
        </view>

        <view class="item" @tap="notOpen('分销')">
          <view class="img">
            <image src="/static/images/wode/fapiaoguanli.png" />
          </view>
          <view class="text"> 发票管理 </view>
        </view>
        <view class="item" @tap="notOpen('分销')">
          <view class="img">
            <image src="/static/images/wode/chongdianka.png" />
          </view>
          <view class="text"> 充电卡 </view>
        </view>
        <view class="item" @tap="notOpen('分销')">
          <view class="img">
            <image src="/static/images/wode/shezhi.png" />
          </view>
          <view class="text"> 设置 </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMemberStore } from '@/stores'
import { getUserInfoAPI } from '@/services/login'
import type { userInfoResult } from '@/types/member'
import { onLoad, onShow } from '@dcloudio/uni-app'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 订单选项
const orderTypes = [
  { type: '1', text: '退款', icon: 'icon-user' },
  { type: '2', text: '充值', icon: 'icon-user' },
]
onShow(() => {
  if (!memberStore.profile) {
    memberStore.clearProfile()
    uni.navigateTo({ url: '/pages/login/login' })
  }
})
onLoad(() => {
  getUserInfo()
})
const memberStore = useMemberStore()

const userinfo = ref<userInfoResult>()

// 获取会员信息
const getUserInfo = async () => {
  const memberStore = useMemberStore()
  if (memberStore.userInfo) {
    userinfo.value = memberStore.userInfo

    console.log(userinfo.value.mobile)
    return
  }

  const user = await getUserInfoAPI()

  if (Number(user.code) == 0) {
    memberStore.setUserInfo(user.user)
    userinfo.value = user.user
  } else {
    uni.showToast({ title: '用户信息获取失败' })
  }
}

const notOpen = () => {
  uni.navigateTo({ url: '/pages/detail/detail' })
}
</script>

<style lang="scss">
@import './my.scss';
</style>
